<template>
  <transition name="fade">
    <div class="hint_wrap">
      <b :class="hint.ok?'ok':'error'"></b>
       <p>{{hint.text}}</p>
    </div>
  </transition>
</template>

<script>
  import {mapMutations} from 'vuex'
    export default {
        name: "hint",
        props:['hint'],
        data() {
            return {}
        },
        created() {
          this.timer=setTimeout(()=>{
              this.setHint({
                isHint:false,
                text:'',
                ok:true
              })
          },1000)
          this.$watch('hint',function(){
            clearTimeout(this.timer)
            this.timer=setTimeout(()=>{
              this.setHint({
                isHint:false,
                text:'',
                ok:true
              })
            },1000)
          })
        },
        activated() {
        },
        computed: {},
        methods: {
          ...mapMutations({
            setHint:'SET_HINT'
          })
        },
        components: {

        }
    }
</script>

<style scoped lang="scss">
    .hint_wrap{
      position: fixed;
      min-width: 130px;
      padding-bottom: 10px;
      top: 50%;
      background-color: rgba(0, 0, 0, 0.6);
      left: 50%;
      transform: translateX(-50%)translateY(-50%);
      border-radius: 5px;
      z-index: 999;
      >b{
        display: inline-block;
        width: 26px;
        height: 26px;
        background-size: 100% 100%;
        margin-top: 13px;
      }
      >p{
        color: #fff;
        font-size: 13px;
        margin-top: 11px;
        letter-spacing: 1px;
        line-height: 18px;
      }
    }
  .ok{
    background-image: url('../assets/img/ok.png');
  }
  .error{
    background-image: url('../assets/img/error.png');
  }
    .fade-enter-active /* .fade-leave-active below version 2.1.8 */
    {
      opacity: 0;
    }

    .fade-enter-to /* .fade-leave-active below version 2.1.8 */
    {
      opacity: 1;
      transition: all .25s;
    }
    .fade-leave-active /* .fade-leave-active below version 2.1.8 */
    {
      opacity: 1;
    }

    .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
      opacity: 0;
      transition: all .15s;
    }
</style>
